import { Component } from "react";

class Footer extends Component{
    render(){
        const { flag, showList, changeFlag, delCompleted } = this.props
        return(
            <footer className="footer">
            <span className="todo-count"><strong>{showList.length}</strong> item left</span>

            <ul className="filters">
                <li>
                    <a className={flag == 'all' ? 'selected' : ''} onClick={()=>{changeFlag('all')}} href="#/">All</a>
                </li>
                <li>
                    <a className={flag == 'active' ? 'selected' : ''} onClick={()=>{changeFlag('active')}} href="#/active">Active</a>
                </li>
                <li>
                    <a className={flag == 'completed' ? 'selected' : ''} onClick={()=>{changeFlag('completed')}} href="#/completed">Completed</a>
                </li>
            </ul>

            <button className="clear-completed" onClick={delCompleted}>Clear completed</button>
        </footer>
        )
    }
}

export default Footer